<template>
  <el-form :model="ruleForm" ref="ruleForm" :label-position="labelPosition" :class="isEdit?'':'formItem'"
    :rules="rules">
    <!-- 保险类型 报废 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">维修信息</span>
      </div>

      <el-row :gutter="24">
        <el-col v-if="isShow">
          <el-form-item label="维修类别:">
            <el-radio-group v-model="ruleForm.maintenanceType" disabled>
              <el-radio label="1">报废</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="预计维修开始时间:" prop="expectStartTime" v-if="isShow">
            <el-date-picker type="date" v-model="ruleForm.expectStartTime" v-if="isEdit" value-format='yyyy-MM-dd'
              style="width: 100%;" placeholder="选择预计维修开始时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.expectStartTime }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预计维修结束时间:" prop="expectEndTime" v-if="isShow">

            <el-date-picker type="date" v-model="ruleForm.expectEndTime" v-if="isEdit" value-format='yyyy-MM-dd'
              style="width: 100%;" placeholder="选择预计维修结束时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.expectEndTime }}</span>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="被保险人:" v-if="isShow" prop="insuredName">
            <el-input v-if="isEdit" v-model="ruleForm.insuredName" placeholder="输入被保险人"></el-input>
            <span v-else>{{ ruleForm.insuredName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="驾驶员:" v-if="isShow" prop="driverName">
            <el-input v-if="isEdit" v-model="ruleForm.driverName" placeholder="输入驾驶员"></el-input>
            <span v-else>{{ ruleForm.driverName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="责任人单位名称:" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.responsibleUnitName" placeholder="输入责任人单位名称"></el-input>
            <span v-else>{{ ruleForm.responsibleUnitName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="责任类型:" prop="responsibilityType" v-if="isShow">
            <el-select v-model="ruleForm.responsibilityType" placeholder="选择责任类型" style="width: 100%;" v-if="isEdit">
              <el-option v-for="item in dict.type.responsibility_type" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span v-else>{{ handleCcomputed(dict.type.responsibility_type, ruleForm.responsibilityType) }}</span>

          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="责任方保险公司名称:" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.responsibleInsuranceUnitName"
              placeholder="输入责任方保险公司名称"></el-input>
            <span v-else>{{ ruleForm.responsibleInsuranceUnitName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事故日期:" prop="accidentDate" v-if="isShow">

            <el-date-picker type="date" v-model="ruleForm.accidentDate" v-if="isEdit" value-format='yyyy-MM-dd'
              style="width: 100%;" placeholder="选择事故日期">
            </el-date-picker>
            <span v-else>{{ ruleForm.accidentDate }}</span>

          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="事故类型:" v-if="isShow">
            <el-select v-model="ruleForm.accidentType" placeholder="选择事故类型" style="width: 100%;"
              @change="handleAccidentType" v-if="isEdit">
              <el-option v-for="item in dict.type.accident_type" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <span v-else>{{ selectDictLabel(dict.type.accident_type, ruleForm.accidentType) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="出险地点:" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.accidentLocation" placeholder="输入出险地点"></el-input>
            <span v-else>{{ ruleForm.accidentLocation }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否有人伤:" v-if="isShow">
            <el-select v-model="ruleForm.humanInjury" placeholder="选择是否有人伤" style="width: 100%;" v-if="isEdit">
              <el-option label="是" value="1"></el-option>
              <el-option label="否" value="2"></el-option>
            </el-select>
            <span v-else>{{
                ruleForm.humanInjury == "1" ? '是' : ruleForm.humanInjury ==
                "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报案时间:" v-if="isShow">

            <el-date-picker type="datetime" v-model="ruleForm.reportingCaseTime" v-if="isEdit"
              value-format='yyyy-MM-dd HH:mm:ss' style="width: 100%;" placeholder="选择报案时间">
            </el-date-picker>
            <span v-else>{{ ruleForm.reportingCaseTime }}</span>

          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col v-if="isShow">
          <el-form-item label="定损单:" prop="lossAssessmentUrl">
            <image-common v-model="ruleForm.lossAssessmentUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 保险公司定损额 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">保险公司定损额（车）</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="定损总计:" prop="assessmentTotalPrice" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.assessmentTotalPrice" v-thousand placeholder="输入定损总计"
              disabled></el-input>
            <span v-else>{{format_thousand( ruleForm.assessmentTotalPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="主车定损金额:" prop="vehicleAssessmentPrice" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.vehicleAssessmentPrice" placeholder="输入主车定损金额" v-thousand
              @change="changeAmount('vehicleAssessmentPrice')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.vehicleAssessmentPrice) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拍卖公司残值:" prop="residualValue" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.residualValue" placeholder="输入物损金额" v-thousand
              @change="changeAmount('residualValue')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.residualValue) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他金额:" prop="carOther" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.carOther" placeholder="输入其他金额" v-thousand
              @change="changeAmount('carOther')"></el-input>
            <span v-else>{{ format_thousand(ruleForm.carOther) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="拍卖公司名称:" prop="auctionCompanyName" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.auctionCompanyName" placeholder="输入拍卖公司名称"></el-input>
            <span v-else>{{ ruleForm.auctionCompanyName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="银行账号:" prop="bankAccount" v-if="isShow">
            <el-input v-if="isEdit" v-model="ruleForm.bankAccount" placeholder="输入银行账号"></el-input>
            <span v-else>{{ ruleForm.bankAccount }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col>
          <el-form-item label="拍卖公司残值附件:" prop="residualUrl" v-if="isShow">
            <image-common v-model="ruleForm.residualUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-card>

    <!--保险公司定损额（三者）-->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <div style="display: flex;justify-content: space-between;width: 100%">
          <span class="header-card-title">保险公司定损额（三者）</span>

        </div>
      </div>
      <el-row :gutter="24" style="margin-bottom: 16px;">
        <el-col v-if="isShow">
          <el-table size="mini" :data="ruleForm.threeLossAssessmentDtoList" border style="width: 100%"
            :header-cell-class-name="headerClass">

            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column align="center" label="人伤金额" min-width="140" prop="personPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.personPrice'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.personPrice" v-if="isEdit" size="mini" v-thousand
                    @change="changeThreeLoss(row, $index, 'personPrice')"></el-input>
                  <span v-else>{{ format_thousand(row.personPrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="施救费用" min-width="140" prop="rescueCost">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.rescueCost'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.rescueCost" v-if="isEdit" v-thousand
                    @change="changeThreeLoss(row, $index, 'rescueCost')" size="mini"></el-input>
                  <span v-else> {{ format_thousand(row.rescueCost) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="物损金额" min-width="140" prop="damagePrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.damagePrice'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.damagePrice" v-if="isEdit" v-thousand
                    @change="changeThreeLoss(row, $index, 'damagePrice')" size="mini"></el-input>
                  <span v-else>{{ format_thousand(row.damagePrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="三者定损金额" min-width="140" prop="otherAssessmentPrice">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.otherAssessmentPrice'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.otherAssessmentPrice" v-if="isEdit" v-thousand
                    @change="changeThreeLoss(row, $index, 'otherAssessmentPrice')" size="mini"></el-input>
                  <span v-else>{{ format_thousand(row.otherAssessmentPrice) }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="三者车牌号" min-width="140" prop="otherCarNo">
              <template #default="{row,$index}">
                <el-form-item class="formTable" :prop="'threeLossAssessmentDtoList.'+$index+'.otherCarNo'"
                  :rules="{required: requiredTable,  trigger: 'blur'}">
                  <el-input v-model="row.otherCarNo" v-if="isEdit" size="mini"></el-input>
                  <span v-else>{{ row.otherCarNo }}</span>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column align="center" label="其他" min-width="140" prop="threeOther">
              <template #default="{row}">
                <el-input v-model="row.threeOther" v-if="isEdit" size="mini"></el-input>
                <span v-else>
                  {{ row.threeOther }}
                </span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col v-if="isShow">
          <el-form-item label="上传附件:">
            <image-common v-model="ruleForm.maintenanceProjectUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 其他费用 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">其他费用</span>
      </div>
      <el-row :gutter="24">

        <el-col :span="8">
          <el-form-item label="其他费用:" v-if="isShow" prop="otherPrice">
            <el-input v-if="isEdit" v-model="ruleForm.otherPrice" @change="changeAmount('otherPrice')"
              placeholder="输入其他费用" v-thousand></el-input>
            <span v-else>{{ format_thousand(ruleForm.otherPrice) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他费用产生原因:" v-if="isShow" prop="otherCostReason">
            <el-input v-if="isEdit" v-model="ruleForm.otherCostReason" placeholder="输入其他费用产生原因"></el-input>
            <span v-else>{{ ruleForm.otherCostReason }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <el-form-item label="其他费用产生附件:" v-if="isShow" prop="otherCostUrl">
            <image-common v-model="ruleForm.otherCostUrl" :limit="20" :disabled="!isEdit" :upType="2" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>

    <!-- 出险相关信息 -->
    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">出险相关信息</span>
      </div>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="是否个人垫付:" prop="advancePayment" v-if="isShow">
            <el-select v-model="ruleForm.advancePayment" placeholder="选择是否个人垫付" style="width: 100%;" v-if="isEdit">
              <el-option label="是" :value="1"></el-option>
              <el-option label="否" :value="2"></el-option>
            </el-select>
            <span v-else>{{
                ruleForm.advancePayment == "1" ? '是' : ruleForm.advancePayment == "2" ? '否' : ''
              }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="ruleForm.maintenanceType !== '3'">
          <el-form-item label="维修厂:" prop="maintenanceShopId" v-if="isShow">
            <el-select v-if="isEdit" v-model="ruleForm.maintenanceShopId" @change="handleChange" style="width: 100%"
              placeholder="请选择输入维修厂">
              <el-option v-for="item in options" :key="item.supplierId" :label="item.supplierName"
                :value="item.supplierId" />
            </el-select>
            <span v-else>{{ ruleForm.maintenanceShop }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="个人垫付费用:" prop="advancePaymentCost" v-if="isShow && ruleForm.advancePayment == '1'">
            <el-input v-if="isEdit" v-model="ruleForm.advancePaymentCost" @change="changeAmount('advancePaymentCost')"
              placeholder="输入个人垫付费用" v-thousand></el-input>
            <span v-else>{{ format_thousand(ruleForm.advancePaymentCost) }}</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col>
          <el-form-item label="备注:" prop="assessmentRemark" v-if="isShow">
            <el-input v-if="isEdit" placeholder="输入备注" type="textarea" :rows="4"
            :maxlength="500"  v-model="ruleForm.assessmentRemark"></el-input>
            <span v-else>{{ ruleForm.assessmentRemark }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-card>
  </el-form>
</template>

<script>
import { effectDate } from "@/utils/libs/effectDate.js";
import { getInsuranceSelectList } from "@/api/cwgd/insuranceSelect";
import {toNumberAdd} from "@/utils/utils";
export default {
  dicts: ["accident_type", "responsibility_type"],
  name: "scrapRepair", //报废维修
  model: {
    prop: "detailForm",
    event: "update:detailForm",
  },

  props: {
    detailForm: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    handleCcomputed() {
      return function (objData, val) {
        let label = "";
        let index = objData.findIndex((a) => a.value == val);
        if (index !== -1) {
          label = objData[index].label;
        }
        return label;
      };
    },
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.detailForm, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            if (value) {
              that.handleClearValidate(key);
            }
            that.$emit("update:detailForm", { ...target, [key]: value });
            return true;
          },
        });
        return proxy;
      },
    },
    labelPosition() {
      if (this.isEdit) {
        return "top";
      } else {
        return "left";
      }
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
  },
  data() {
    var start = (rule, value, callback) => {
      let that = this;
      effectDate(
        rule,
        value,
        callback,
        that.ruleForm.expectStartTime,
        that.ruleForm.expectEndTime,
        "预计维修开始时间",
        "预计维修结束时间"
      );
    };
    var end = (rule, value, callback) => {
      let that = this;
      effectDate(
        rule,
        value,
        callback,
        that.ruleForm.expectStartTime,
        that.ruleForm.expectEndTime,
        "预计维修开始时间",
        "预计维修结束时间"
      );
    };
    return {
      isShow: true,
      headerList: ["maintenanceName", "price", "materialCost", "laborCost"],
      rules: {
        expectStartTime: [
          {
            required: this.state === "write",
            validator: start,
            trigger: "change",
          },
        ],
        expectEndTime: [
          {
            required: this.state === "write",
            validator: end,
            trigger: "change",
          },
        ],
        insuredName: [
          {
            required: this.state === "write",
            message: "请输入被保险人",
            trigger: "blur",
          },
        ],
        driverName: [
          {
            required: this.state === "write",
            message: "请输入驾驶员",
            trigger: "blur",
          },
        ],
        responsibleUnitName: [
          {
            required: this.state === "write",
            message: "请输入责任人单位名称",
            trigger: "blur",
          },
        ],
        responsibilityType: [
          {
            required: this.state === "write",
            message: "请选择责任类型",
            trigger: "change",
          },
        ],
        responsibleInsuranceUnitName: [
          {
            required: this.state === "write",
            message: "输入责任方保险公司名称",
            trigger: "blur",
          },
        ],
        accidentDate: [
          {
            required: this.state === "write",
            message: "请选择事故日期",
            trigger: "change",
          },
        ],
        accidentLocation: [
          {
            required: this.state === "write",
            message: "请输入出险地点",
            trigger: "blur",
          },
        ],
        humanInjury: [
          {
            required: this.state === "write",
            message: "选择是否有人伤",
            trigger: "change",
          },
        ],
        reportingCaseTime: [
          {
            required: this.state === "write",
            message: "请选择报案时间",
            trigger: "change",
          },
        ],
        lossAssessmentUrl: [
          {
            required: this.state === "write",
            message: "请选择定损单",
            trigger: "change",
          },
        ],
        //保险公司定损额
        assessmentTotalPrice: [
          {
            required: this.state === "write",
            message: "请输入定损总计",
            trigger: "blur",
          },
        ],
        vehicleAssessmentPrice: [
          {
            required: this.state === "write",
            message: "请输入主车定损金额",
            trigger: "blur",
          },
        ],
        residualValue: [
          {
            required: this.state === "write",
            message: "请输入拍卖公司残值",
            trigger: "blur",
          },
        ],
        auctionCompanyName: [
          {
            required: this.state === "write",
            message: "请输入拍卖公司名称",
            trigger: "blur",
          },
        ],
        residualUrl: [
          {
            required: this.state === "write",
            message: "请选择定损单",
            trigger: "change",
          },
        ],

        //出险相关信息
        advancePayment: [
          {
            required: this.state === "write",
            message: "请选择是否个人垫付",
            trigger: "change",
          },
        ],
        maintenanceShopId: [
          {
            required: this.state === "write",
            message: "请输入输入维修厂",
            trigger: "blur",
          },
        ],
        advancePaymentCost: [
          {
            required: this.state === "write",
            message: "请输入个人垫付费用",
            trigger: "blur",
          },
        ],
      },
      options: [],
      headerThreeLossAssessmentDtoList: [
        "personPrice",
        "rescueCost",
        "damagePrice",
        "otherAssessmentPrice",
        "otherCarNo",
      ],
      requiredTable: false,
    };
  },
  created() {
    this.handleList();
  },
  mounted() {},
  methods: {
    handleAccidentType(val) {
      if (val === "2") {
        this.requiredTable = true;
      } else {
        this.requiredTable = false;
      }
    },

    headerClass({ row, column, rowIndex, columnIndex }) {
      for (let i = 0; i < row.length; i++) {
        if (
          this.headerThreeLossAssessmentDtoList.includes(row[i].property) &&
          i == columnIndex &&
          this.requiredTable
        ) {
          return "header-class";
        }
      }
    },

    handleList() {
      getInsuranceSelectList({ businessTypeCode: "4" }).then((res) => {
        if (res.code === 200) {
          this.options = res.data;
        }
      });
    },

    handleChange(val) {
      this.value.maintenanceShopId = val;
      this.value.maintenanceShop = this.options.find(
        (item) => item.supplierId === val
      ).supplierName;
    },

    maintenanceTypeChange(val) {},

    changeAmount(str) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      if (!msg.test(this.ruleForm[str])) {
        this.ruleForm[str] = "";
      } else {
        this.ruleForm[str] = this.ruleForm[str]
          .toString()
          .match(/^\d+(?:\.\d{0,2})?/)[0];
        this.sumPrice();
      }
    },

    //定损总计
    sumPrice() {
      let num = 0;
      num = toNumberAdd(
          toNumberAdd(
              Number(this.ruleForm.vehicleAssessmentPrice),
              Number(this.ruleForm.residualValue)
          )
          ,
          Number(this.ruleForm.carOther))
      this.ruleForm.assessmentTotalPrice = num
        .toString()
        .match(/^\d+(?:\.\d{0,2})?/)[0];
    },

    changeThreeLoss(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;
      // if (field == "price") {
      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
      // }
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
    handleClearValidate(str) {
      this.$refs.ruleForm.clearValidate(str);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/cwgd/formScss.scss";

.decoration-illustrate {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


